<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
</head>
<body>
<div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
    <span>s2</span>
</div>

<div></div>
<p>p1</p>
<p>p2</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)的元素
    let ds1 = $("div span");
    alert(ds1.length);//4个span标签
    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    let ds2 = $("div > span");
    alert(ds2.length);//2个span标签
    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    let dp1 = $("div+p");
    alert(dp1.html());
    /* // 4. 四海之内皆兄弟选择器 $("A ~ B");    A相邻的所有B*/
    let dp2 = $("div~p");
    alert(dp2.length);
</script>
</html>